<template>
  <a-layout class="h-[100vh] w-[100vw]">
    <a-layout-header
      style="
        padding-inline: 0;
        height: 82px;
        background: #292c38;
        padding: 20px;
        line-height: normal;
      "
    >
      <div class="flex justify-between h-full items-center">
        <div class="title">
          <img src="@/assets/imgs/icon.png" height="29" width="28" />
          <span class="cursor-pointer">AI Hub</span>
        </div>
      </div>
    </a-layout-header>
    <a-layout-content
      class="bg-[#292C38]"
      style="height: calc(10vh - 82px - 70px)"
    >
      <div class="grid content-center px-[40px] h-full">
        <div style="transform: translateY(-50%)">
          <div class="text-[64px]">Create a better world</div>
          <div class="text-[#96A0B5] text-[36px]">
            with artificial intelligence
          </div>
        </div>
      </div>
      <div
        class="absolute right-[0] bottom-[0] h-[100vh] w-[40vw] bg-[#343744] grid content-center px-[160px]"
      >
        <div class="title">Hi, Welcome Back!</div>
        <div class="tool my-[12px]">Log In to your account</div>
        <a-form
          :model="formState"
          name="normal_login"
          class="login-form"
          @finish="onFinish"
          @finishFailed="onFinishFailed"
          aria-autocomplete="off"
        >
          <a-form-item
            name="username"
            :rules="[
              { required: true, message: 'Please input your username!' },
            ]"
          >
            <a-input
              size="large"
              v-model:value="formState.username"
              autocomplete="nope"
            >
              <template #prefix>
                <UserOutlined class="site-form-item-icon" />
              </template>
            </a-input>
          </a-form-item>

          <a-form-item
            name="password"
            :rules="[
              { required: true, message: 'Please input your password!' },
            ]"
          >
            <a-input-password
              size="large"
              autocomplete="new-password"
              v-model:value="formState.password"
            >
              <template #prefix>
                <LockOutlined class="site-form-item-icon" />
              </template>
            </a-input-password>
          </a-form-item>

          <a-form-item>
            <a-form-item name="remember" no-style>
              <a-checkbox v-model:checked="formState.remember"
                >Remember me</a-checkbox
              >
            </a-form-item>
          </a-form-item>

          <a-form-item>
            <a-button
              :disabled="disabled"
              type="primary"
              html-type="submit"
              class="w-full"
            >
              Log in
            </a-button>
          </a-form-item>
        </a-form>
      </div>
    </a-layout-content>
  </a-layout>
</template>

<script setup>
// import { login } from "@/service/web";
import { useUserStore } from "@/stores/user";
import { message } from "ant-design-vue";
const router = useRouter();

const formState = ref({
  username: "",
  password: "",
  remember: false,
});

const user = useUserStore();

const onFinish = async (values) => {
    // const res = await login({
    //   ...formState.value,
    // });

      message.success("登陆成功");
      router.push("/home");
      console.log(res.data)
      // 将账号密码存在store里面
      user.setUser(res.data);
      console.log(user.user)
      localStorage.setItem("token", res?.data?.token);
      localStorage.setItem("loginInfo", JSON.stringify(formState.value));
};

onMounted(() => {
  const loginInfo = localStorage.getItem("loginInfo");
  loginInfo && (formState.value = JSON.parse(loginInfo));
});

const onFinishFailed = (errorInfo) => {
  console.log("Failed:", errorInfo);
};
const disabled = computed(() => {
  return !(formState.value.username && formState.value.password);
});
</script>

<style lang="scss">
.title {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-size: 24px;
  line-height: 36px;
  color: #fff;

  display: flex;
  align-items: center;
  gap: 12px;
}

.tool {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  color: #96a0b5;
}
</style>